<template>
	<div id="fromsMin">
		<div id='F11'>
			<div class="title_left">
				<h3>轻松加盟</h3>
				<h2><b>只需三步</b></h2>
				<div class='img_lc'>
					<img src="../../../../static/imgs/bk/sanb.png" />
				</div>
			</div>
			<div class="f11_con">

				<div class='from'>
					<ul>
						<div v-if='hied.status' id="tc">
							{{hied.con}}
							
						</div>
						<li>
							<span>您的姓名：</span><span class="inp">
					       	     <input type="text" v-model="name" name="name"/>
					       	         <span class='radio_active'>
					       	         	        先生<input  type="radio" value="M" name='sex' v-model="sex" checked='checked' />
					       	         	       女士 <input  type="radio" value="F" name='sex' v-model='sex' />
					       	         </span>
							</span>
						</li>
						<li>
							<span>联系方式：</span><span class="inp"><input type="text" name='phone' @blur='verify' v-model="phone"/> <span style="color:red">{{yz}}</span></span>
						</li>
						<li>
							<span>开店预算：</span><span><input type="number" name="money" v-model="money"  />&nbsp;&nbsp;*万元</span>
						</li>
						<li class='clearfix'>
							<span class="activ">所在地区：</span><span class='activ2'><FromsDQ v-model='test'/><input class='activ2_txt' name="dq" type="text" /></span>

						</li>
						<li>
							<span>咨询内容：</span><span><input type="text"  class='con' name="message" v-model="message"/> </span>
						</li>
						<li class="tj"> 
		                    <el-button class="cursorClick"  @click='tj' :loading="ButStatus">提交</el-button>
						</li>
						<li></li>
					</ul>
				</div>

			</div>
		</div>

	</div>

</template>
<script>
import axios from "axios";
import FromsDQ from "./FromsDQ";
import { Message } from "element-ui";
import config from "./config.json";
export default {
  name: "fromsmin",
  components: {
    FromsDQ
  },
  data() {
    return {
      name: "",
      sex: "M",
      test: [],
      phone: null,
      money: null,
	  message: "",
	  ButStatus: false,
      yz: "",
      phonetf: false,
      hied: {
        status: false,
        con: ""
      }
    };
  },
  methods: {
    tj() {
      var thiss = this;
      if (this.name == "") {
        Message.warning("姓名不能为空");
      } else if (this.phonetf == false) {
        Message.warning("请输入正确的联系方式");
      } else {
		thiss.hied.status = true;
		thiss.ButStatus=true;
        thiss.hied.con = "正在提交...";
        axios.post(`${config.host}/unauth/add`, {
            name: this.name,
            message: this.message,
            phone: this.phone,
            sex: this.sex,
            money: this.money,
            province: this.test[0],
            city: this.test[1],
            region: this.test[2],
						domainName: decodeURIComponent(window.location.href)
          })
          .then(function(response) {
		       thiss.ButStatus=false;
            if (response.data.success == true) {
              thiss.hied.con = "提交成功";
              setTimeout(() => {
                thiss.hied.status = false;
              }, 1000);
            } else {
              thiss.hied.con = "提交失败";
              setTimeout(() => {
                thiss.hied.status = false;
              }, 1000);
            }
          }).catch(function(error) {
            thiss.hied.con = "提交失败";
            setTimeout(() => {
              thiss.hied = false;
            }, 1000);
            console.log(error);
          });
      }
    },
    verify() {
      var myreg = /^[1][0-9]{10}$/;
      if (!myreg.test(this.phone)) {
        this.yz = "请输入正确的联系方式";
        this.phonetf = false;
      } else {
        this.yz = "";
        this.phonetf = true;
      }
    }
  }
};
</script>
<style lang='scss' scoped>
input {
  border: 1px solid #ccc;
  width: 322px;
  height: 47px;
  padding-left: 10px;
  font-size: 29px;
  color: #787878;
}

input[type="radio"] {
  width: 20px;
  height: 20px;
}

#F11 {
  width: 873px;
  margin: 0 auto;
  padding-top: 106px;
  padding-bottom: 76px;
  .title_left {
    h3 {
      font-size: 33px;
      font-family: SourceHanSansCN-Regular;
      color: #787878;
      line-height: 41px;
    }
    h2 {
      font-size: 43px;
      font-family: SourceHanSansCN-Heavy;
      color: #f5855f;
      line-height: 53px;
    }
    .img_lc {
      text-align: center;
      width: 100%;
      height: 400px;
      line-height: 400px;
      /*background: url(../../../../static/imgs/bk/三步.png) no-repeat;*/
    }
  }
  .f11_con {
    form {
      table {
        padding: 20px;
        border: 1px solid #000;
        width: 873px;
        height: 572px;
        tr {
          td:nth-child(1) {
            text-align: right;
          }
        }
      }
    }
  }
}

#fromsMin {
  .from {
    ul {
      position: relative;
      margin: 0 auto;
      border: 1px solid #787878;
      width: 873px;
      padding: 30px 0 30px 61px;
      background-color: #fff;
      #tc {
        width: 200px;
        height: 100px;
        background: rgba(0, 0, 0, 0.8);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        line-height: 100px;
        color: #fff;
        border-radius: 20px;
        text-align: center;
      }
      li {
        padding: 12px 0px;
        color: #787878;
        font-size: 29px;
        span {
          &.syn {
            color: red;
            padding-left: 20px;
          }
          .radio_active {
            padding-left: 35px;
          }
          .nv {
            margin-left: 70px;
          }
        }
        .activ {
          display: block;
          height: 152px;
          float: left;
        }
        .activ2 {
          float: left;
          .activ2_txt {
            width: 623px;
            height: 47px;
          }
        }
        .con {
          width: 627px;
          height: 100px;
        }
        &.tj {
          text-align: center;
          button {
            width: 292px;
            height: 62px;
            background: #f5855f;
            color: #fff;
            font-size: 39px;
            user-select: none;
          }
        }
      }
    }
  }
}
</style>